<template>
  <div class="app-container">
    <el-row :gutter="20" v-if="info.stationId">
      <el-card>
        <template #header>
          <span>电站详情</span>
        </template>
        <el-row class="info_cont">
          <el-col :lg="4" :sm="6" :xs="24">
            <label>电站名称：</label>
            <span>{{ info.stationName }}</span>
          </el-col>
          <el-col>
            <label>电站地址：</label>
            <span>{{ info.address }}</span>
          </el-col>
          <el-col>
            <label>备注：</label>
            <span>{{ info.remark }}</span>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>
<script setup name="StationInfo">
import {getStation} from "@/api/equipment/station";

const route = useRoute();
const router = useRouter();
const {proxy} = getCurrentInstance();

const info = ref({})
const queryParams = ref({
  stationId: null
})

function getInfo() {
  getStation(route.query.stationId).then((response) => {
    info.value = response.data;
  });
}

getInfo()
</script>

<style lang="scss" scoped>
.flex_cont {
  display: flex;
}

.info_cont {
  float: none;
  line-height: 36px;
  font-size: 14px;
  vertical-align: middle;
}

.btn_group {
  margin: 10px 0 0;
  padding: 10px 0 0;
  /* border-top: 1px solid #ccc; */
}

.mt10 {
  margin-top: 10px;
}

.el-col-5:deep() {
  width: 20%;
  flex: 0 0 20%;
}

.road_state {
  display: inline-block;
  width: 80px;
  height: 80px;
}

.nolink {
  background-image: url("../../../assets/images/nolink.png");
  background-size: cover;
}

.online {
  background-image: url("../../../assets/images/online.png");
  background-size: cover;
}

.used {
  background-image: url("../../../assets/images/used.png");
  background-size: cover;
}

.error {
  background-image: url("../../../assets/images/error.png");
  background-size: cover;
}
</style>
